<template>
  <view class="approval_apply">
    <xbd-pages-content title="我的审批">
      <template #content>
        <view class="content">
          <view class="choose">
            <view class="two">
              <xbd-select
                :carId.sync="type"
                :visible.sync="visible"
                :infoList="typeArr"
                @selectChoose="searchList"
              >
                <template>
                  <view class="select" @click="visible = true">
                    <text> {{ type || "全部状态" }} </text>
                    <image
                      class="image"
                      src="../../static/images/health/right.svg"
                      mode=""
                    ></image>
                  </view>
                </template>
              </xbd-select>

              <uni-easyinput
                type="text"
                v-model="search"
                placeholder="搜索会议名称查询"
              />
              <view class="search" @click="clickSearch">
                <image
                  class="image"
                  src="../../static/images/performance/search.svg"
                  mode=""
                ></image>
              </view>
            </view>
            <text>共{{ total }}条</text>
          </view>
          <uni-list :border="false">
            <xbd-meet-card
              v-for="(item, index) in showList"
              :key="index"
              :myInfo="item"
              @clickMeetCard="details(item._id)"
            ></xbd-meet-card>
            <xbd-null-list v-if="!showList.length"></xbd-null-list>
            <xbd-loading-more
              :status-num="statusNum"
              :is-load-more="isLoadMore"
            ></xbd-loading-more>
          </uni-list>
        </view>
      </template>
    </xbd-pages-content>
  </view>
</template>

<script>
import { Meeting } from "@/api/index.js";
export default {
  data() {
    return {
      isSearch: false,
      visible: false,
      total: 0,
      search: "",
      statusNum: 0,
      isLoadMore: false,
      type: "",
      showList: [],
      typeArr: [
        {
          value: "0",
          label: "全部状态",
          state: "",
        },
        {
          value: "1",
          label: "待审批",
          state: "0",
        },
        {
          value: "2",
          label: "已通过",
          state: "1",
        },
        {
          value: "3",
          label: "已拒绝",
          state: "2",
        },
      ],
      queryInfo: {
        type: "audit",
        status: "", //状态
        keyword: "", //关键字
        page: 0,
        perpage: 10,
      },
    };
  },
  methods: {
    searchList(state) {
      this.queryInfo.status = state;
    },
    clickSearch() {
      this.queryInfo.keyword = this.search;
      this.queryInfo.page = 0;
      this.getList();
      this.isLoadMore = false;
    },
    //加载更多
    loadmore() {
      if (this.visible) {
      } else {
        this.queryInfo.page++;
        this.statusNum = 1;
        this.isLoadMore = true;
        this.loadmoreList();
      }
    },
    async loadmoreList() {
      try {
        this.$showLoading("加载中");
        const res = await Meeting.getList(this.queryInfo);
        uni.hideLoading();
        if (res.data.list.length) {
          this.total = res.data.total;
          this.showList = this.showList.concat(res.data.list);
          if (res.data.list.length === this.queryInfo.perpage) {
            this.statusNum = 2;
          } else {
            this.statusNum = 0;
          }
          // this.isLoadMore = false;
        } else {
          this.queryInfo.page--;
          this.statusNum = 0;
        }
      } catch (e) {
        uni.hideLoading();
        this.queryInfo.page--;
      }
    },

    async getList() {
      try {
        this.$showLoading("加载中");
        const res = await Meeting.getList(this.queryInfo);
        this.showList = res.data.list;
        this.total = res.data.total;
        uni.hideLoading();
        if (res.data.list.length === this.queryInfo.perpage) {
          this.isLoadMore = true;
          this.statusNum = 2;
        }
        // 查询不到结果后返回 暂无数据
        if (res.data.list.length === 0) {
          (this.isLoadMore = false), (this.isSearch = true);
        }
      } catch (e) {
        uni.hideLoading();
      }
    },
    details(id) {
      uni.navigateTo({
        url: `./details?msg=2&id=${id}`,
      });
    },
  },
  onShow() {
    this.queryInfo.page = 0;
    this.getList();
    // 强制刷新回到顶部
    uni.pageScrollTo({
      scrollTop: 0,
    });
  },
  // 触底触发
  onReachBottom() {
    // 当下拉组件显示状态 并且显示不是没有数据了 时才进行下拉加载
    if (this.isLoadMore && this.statusNum !== 0) {
      this.loadmore();
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .uni-list {
  background-color: #f8f8f8;
}
::v-deep .data-v-1a79304c {
  white-space: nowrap;
}

::v-deep .uni-easyinput__content {
  border-radius: 8rpx;
  min-height: 32px;
}

::v-deep .uni-input-wrapper {
  text-align: center;
  white-space: nowrap;
}
.choose {
  height: 105px;
  box-sizing: border-box;
  padding: 20px 50rpx;
  font-size: 14px;
  color: #999999;
  background-color: #ffffff;

  .two {
    display: flex;
    height: 32px;
    margin-bottom: 16px;
    .select {
      margin-right: 10rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      white-space: nowrap;
      width: 220rpx;
      height: 32px;
      line-height: 32px;
      border-radius: 8rpx;
      border: 1px solid #e9ecf7;
      box-sizing: border-box;
      padding: 0 20rpx 0 20rpx;
      .image {
        transform: rotate(90deg);
        width: 38rpx;
        height: 38rpx;
      }
    }
    .search {
      margin-left: 20rpx;
      height: 32px;
      // align-items: center;
      .image {
        margin-top: 9px;
        width: 36rpx;
        height: 36rpx;
      }
    }
  }
}
.null {
  color: #999999;
  text-align: center;
  margin-top: 50rpx;
  font-size: 32rpx;
}
</style>
